<template>
  <div>
    <div class="title">热销推荐</div>
    <ul>
      <router-link
        tag="li"
        class="item"
        v-for="item in list"
        :key="item.id"
        :to="'/detail/' + item.id">
        <img class="item-img" :src="item.imgUrl"/>
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">查看详情</button>

        </div>
      </router-link>

    </ul>

  </div>


</template>

<script>
export default {
  name: "Recommend",
  props:{
    list:Array
  }
}
</script>

<style lang="stylus" scoped>
   .title
     margin-top: .2rem
     line-height: .8rem
     background: #eee
     text-indent: .2rem
   .item
     display flex
     padding .1rem
     height 1.9rem
     overflow hidden
     .item-img
       width 1.7rem
       height 1.7rem
       padding .1rem
     .item-info
       flex 1
       padding .1rem
       .item-title
         line-height .56rem
         font-size .32rem
       .item-desc
         line-height: .4rem
         color: #ccc
       .item-button
         color #ffffff
         background #ff9300
         line-height .44rem
         padding 0 .2rem
         border-radius .05rem
         margin-top .16rem

</style>
